<template>
    <view class="goods-card">
        <view class="image-box">
            <image class="image" :src="goodsInfo.images_arr[0]" mode="aspectFill"/>
        </view>
        <view class="content-box">
            <view class="money">￥{{goodsInfo.price}}</view>
            <view class="num">剩余：{{goodsInfo.inventory}}件</view>
        </view>
    </view>
</template>
<script setup>
const props = defineProps({
    goodsInfo: {
        type: Object,
        default: () => {}
    }
})
</script>
<style scoped lang="scss">
.goods-card {
    display: flex;
    gap: 24rpx;
    padding: 24rpx;
    box-sizing: border-box;
    
    .image-box {
        width: 120rpx;
        height: 120rpx;
        border-radius: 12rpx;
        overflow: hidden;
        background-color: #333;
        
        .image {
            width: 100%;
            height: 100%;
        }
    }
    
    .content-box {
        .money {
            font-size: 32rpx;
            color: red;
            margin-bottom: 12rpx;
        }
        
        .num {
            color: #333;
        }
    }
}
</style>
